<template>
  <v-md-preview 
    :text="content" 
    :default-show-toc="true"
    :toc-nav-position-righ="true"
    :include-level="[2, 3, 4]"
  />
</template>

<script lang="ts" setup>
import { shallowRef, isRef, watchEffect, watch } from 'vue';
import { useRouter } from 'vue-router';
const currentRoute = useRouter().currentRoute
// console.log('currentRoute => isRef', isRef(currentRoute))
const content = shallowRef('');
// console.log(currentRoute.value)

watch(
  currentRoute,
  async () => {
    const response = await import(`@/views/docs/${currentRoute.value.name}.md?raw`)
    content.value = await response.default
  },
  // 默认是懒执行的：仅当数据源变化时，才会执行回调。可以通过传入 immediate: true 选项来强制侦听器的回调立即执行：
  {
    immediate: true
  }
)
// watchEffect() 允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为：
/* watchEffect(
  async () => {
    const response = await import(`@/views/extra/${currentRoute.value.name}.md?raw`)
    content.value = await response.default
  }
) */
</script>

